<script>
import App from '@/App.vue'
import { RouterLink, RouterView } from 'vue-router'
import {mapGetters,mapState,mapMutations} from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default{
  data(){
    return{
      account:"",
      password:"",
      ensure_password:"",
      showLogin:true
    }
  },
  computed:{
    ...mapState('user',['user'])
  },
  mounted(){
    if(JSON.stringify(this.user) != '{}'){
      this.$router.push({name:'home'})
    }
  },
  methods:{
    ...mapMutations('user',['updateUser']),
    gotoRegister(){
      console.log('切换到注册页面')
      this.account = ""
      this.password = ""
      this.ensure_password = ""
      this.showLogin = false
    },
    gotoLogin(){
      console.log('切换到登录页面')
      this.account = ""
      this.password = ""
      this.ensure_password = ""
      this.showLogin = true
    },
    loginClickHandler(){
      axios.get("/api/public/v1/seller/login",{
        params: {
          account:this.account,
          password:this.password
        }
      })
      .then(res => {
        console.log(res.data)
        if(res.data.meta.status==200){
          this.updateUser(res.data.message)
          this.$router.push({name:'home'})
          ElMessage({
            type:"success",
            message:"登录成功"
          })
        }
        else{
          ElMessage({
            type:"error",
            message:"登录失败，请检查账号或密码"
          })
        }
      })
      .catch(err => {
        console.error(err); 
      })
      console.log('点击了登录按钮')
    },
    registerClickHandler(){
      if(this.ensure_password !== this.password){
        alert("两次输入的密码不同,请重新输入")
        this.password=""
        this.ensure_password=""
      }
      axios.get("/api/public/v1/seller/register",{
        params: {
          account:this.account,
          password:this.password
        }
      })
      .then(res => {
        if(res.data.meta.status === 200){
          ElMessage({
            type:"success",
            message:"注册成功"
          })
        }else{
          ElMessage({
            type:"error",
            message:res.data.message
          })
        }
      })
    }
  }
}
</script>

<template>
  
  <div class="base-box">
    
    <div class="form-box">
      <div :class="'login-box'" v-if="showLogin">
        <input type="text" placeholder="请输入账号" v-model="account">
        <input type="password" placeholder="请输入密码" v-model="password">
        <button @click="loginClickHandler">登录</button>
        <div class="goto-register">
          还没有账号?去
          <p @click="gotoRegister">注册</p>
        </div>
      </div>
      <div class="register-box" v-if="!showLogin">
        <input type="text" placeholder="请输入账号" v-model="account">
        <input type="password" placeholder="请输入密码" v-model="password">
        <input type="password" placeholder="请再次输入密码" v-model="ensure_password">
        <button @click="registerClickHandler">注册</button>
        <div class='goto-login'>
          已有账号?去
          <p @click="gotoLogin">登录</p>
        </div>
      </div>
    </div>
    
  </div>
  
</template>

<style scoped>

  @import url(../../src/assets/animation/animation.css);
  *{
    margin: 0;
    padding: 0;
  }
  .base-box{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-image: url(../assets/flower.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    .form-box{
      display: flex;
      justify-content: center;
      width: 30%;
      height: 40%;
      background-color: transparent;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0px 0px 15px white;
      backdrop-filter: blur(20px);
      .login-box{
        .goto-register{
          display: flex;
          flex-shrink: 1;
          justify-content: space-between;
          font-size: 12px;
          flex-wrap: nowrap;
        }
        .goto-register p{
          margin-left: 5px;
          color: aliceblue;
          
        }
        .goto-register p:hover{
          cursor: pointer;
        }
        display: flex;
        flex-direction: column;
        width: 80%;
        height: 100%;
        justify-content: space-evenly;
        align-items: center;
      }
      .login-box input{
        background-color: transparent;
        border: none;
        border-bottom: 2px solid gray;
        color: white;
        width: 200px;
      }
      .login-box input::placeholder{
        font-size: 15px;
        color: antiquewhite;
      }
      .login-box input:focus{
        background-color: transparent;
        border: none;
        border-bottom: 2px solid gray;
        color: white;
      }
      .login-box button{
        background-color: transparent;
        border: 2px solid gray;
        color: white;
        width: 60%;
        font-size: 15px;
        border-radius: 5px;
      }
      .login-box button:hover{
        cursor: pointer;
      }
      .register-box button{
        background-color: transparent;
        border: 2px solid gray;
        color: white;
        width: 60%;
        font-size: 15px;
        border-radius: 5px;
      }
      .register-box button:hover{
        cursor: pointer;
      }
      .register-box{
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 100%;
        align-items: center;
        justify-content: space-evenly;

        .goto-login{
          display: flex;
          flex-shrink: 1;
          justify-content: space-between;
          font-size: 12px;
          flex-wrap: nowrap;
        }
        .goto-login p{
          margin-left: 5px;
          color: aliceblue;
          
        }
        .goto-login p:hover{
          cursor: pointer;
        }
        
      }
      .register-box input{
        background-color: transparent;
        border: none;
        border-bottom: 2px solid gray;
        color: white;
        width: 200px;
      }
      .register-box input::placeholder{
        font-size: 15px;
        color: antiquewhite;
      }
      .register-box input:focus{
        background-color: transparent;
        border: none;
        border-bottom: 2px solid gray;
        color: white;
      }
    }
    
  }

</style>